<template>
  <view class="radio_right">
    <u-collapse
      :border="false"
      v-for="(val, index) in list"
      :key="index"
      
    >
      <u-collapse-item
        title="文档指南"
        name="Docs guide"
        :disabled="val.id === 0 ? true : false"
      >
        <view slot="title" class="u-page__item__title__slot-title head1">
          <view class="head1_left">
            <view class="title1">
              {{ val.name }}
            </view>
          </view>
        </view>
        <view
          style="padding-bottom: 24rpx"
          class="box_item1"
          v-for="(item, keIndex) in val.kechengInfo"
          :key="keIndex"
          @click="toDetail(val)"
          :style="{
            background:'rgba(39,39,39,0.5)',
            // background: bacMapping[item.see_ask].background,
            'border-radius': '16rpx',
          }"
        >
          <view class="box_item">
            <view class="itme_left">
              <text class="left_content1">{{ item.title }}</text>
              <!-- <view class="left_type" :class="'type_' + item.kecheng_type">
                {{
                  item.kecheng_type == 0
                    ? "图文"
                    : item.kecheng_type == 1
                    ? "视频"
                    : "音频"
                }}
              </view> -->
            </view>
            <!-- <view class="item_right right_type_1">
              {{ item.see_name || "免费" }}
            </view> -->
          </view>
          <view class="" style="color: #fff">
            <span style="margin-right:20rpx" v-if="item.renwu_name">{{ "#" + item.renwu_name }}</span>
            <span style="margin-right:20rpx" v-if="item.address_name">{{ "#" + item.address_name }}</span>
            <span style="margin-right:20rpx" v-if="item.tushu_name">{{ "#" + item.tushu_name }}</span>
          </view>
        </view>
      </u-collapse-item>
    </u-collapse>

    <view class="empty_view" v-if="list && list.length == 0">
      <image
        class="item_left_clickable"
        src="../../../static/images/my/kong.png"
        mode=""
      ></image>
      <view>当前没有相关数据，请查看其他分类或功能。</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      list2: [
        {
          name: "1 巴蜀人物概述",
          type: 0,
          type_text: "图文",
          live_id: 1,
        },
        {
          name: "1 巴蜀人物概述",
          type: 1,
          type_text: "视频",
          live_id: 2,
        },
        {
          name: "1 巴蜀人物概述",
          type: 2,
          type_text: "音频",
          live_id: 3,
        },
        {
          name: "1 巴蜀人物概述",
          type: 2,
          type_text: "音频",
          live_id: 4,
        },
        {
          name: "1 巴蜀人物概述",
          type: 2,
          type_text: "音频",
          live_id: 5,
        },
        {
          name: "1 巴蜀人物概述",
          type: 2,
          type_text: "音频",
          live_id: 6,
        },
      ],
      bacMapping: [
        {
          id: 1,
          background: "rgba(39,39,39,0.5)",
          text: "免费",
          color: "#55B877",
        },
        {
          id: 2,
          background:
            "linear-gradient(to right, rgba(39,39,39,0.5) 0%,rgba(39,39,39,0.5) 50%, #8CD7A3 100%)",
          text: "元气驿站",
          color: "#fff",
        },
        {
          id: 3,
          background:
            "linear-gradient(to right, rgba(39,39,39,0.5) 0%,rgba(39,39,39,0.5) 50%, #FABC81 100%)",
          text: "启初梦谷",
          color: "#fff",
        },
        {
          id: 4,
          background:
            "linear-gradient(to right, rgba(39,39,39,00.5) 0%,rgba(39,39,39,0.5) 50%, #CFA5E3 100%)",
          text: "青空天台",
          color: "#fff",
        },
        {
          id: 5,
          background:
            "linear-gradient(to right, rgba(39,39,39,0.5) 0%,rgba(39,39,39,0.5) 50%,#7EC6FF 100%)",
          text: "无极云顶",
          color: "#fff",
        },
        {
          id: 6,
          background:
            "linear-gradient(to right, rgba(39,39,39,0.5) 0%,rgba(39,39,39,0.5) 50%, #6C87D0 100%)",
          text: "返朴归真",
          color: "#fff",
        },
      ],
    };
  },
  methods: {
    toDetail(item) {
      console.log(item, 111111111);
      uni.navigateTo({
        url: `/pages/training/detail?id=${item.id}&type=${item.type}`,
        // url: "/pages/stargate/aoyiHallDetails",
      });
    },
    open(e) {
      // console.log('open', e)
    },
    close(e) {
      // console.log('close', e)
    },
    change(e) {
      // console.log('change', e)
    },
  },
};
</script>

<style scoped lang="scss">
// .box {
//   padding: 40rpx 0 0;
//   box-sizing: border-box;
// }

.head1 {
  width: 100%;
  border-radius: 16rpx;
  padding: 8rpx 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .head1_left {
    .title1 {
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;

      .renew_view {
        width: 16rpx;
        height: 16rpx;
        background: #ee6060;
        border-radius: 50%;
        margin-right: 16rpx;
      }

      .renew_text {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #ee6060;
        margin-left: 16rpx;
      }
    }

    .text1 {
      font-size: 26rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #adadad;
      margin-top: 16rpx;
    }
  }

  .head1_right0 {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #888888;
  }

  .head1_right1 {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #55b877;
  }

  .head1_right2 {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.head {
  width: 100%;
  // background: rgba(39,39,39,0.5);
  border-radius: 16rpx;
  padding: 8rpx 0;
  box-sizing: border-box;

  .title {
    font-size: 32rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
  }

  .text {
    font-size: 26rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #adadad;
    margin-top: 16rpx;
  }
}

/deep/ .u-cell__body {
  background: rgba(39, 39, 39, 0.5) !important;
}

/deep/ .u-cell--clickable {
  background: rgba(39, 39, 39, 0.5) !important;
}

/deep/ .u-collapse-item__content__text {
  padding: 0 !important;
}

/deep/ .u-collapse-item__content {
  margin-top: 24rpx;
  margin-bottom: 24rpx;
  padding: 0 !important;
}
.box_item1 {
  width: 100%;
  // background: #F7F8FA;
  padding: 0 32rpx;
  border-radius: 16rpx;
  box-sizing: border-box;
  margin-top: 12rpx;
  position: relative;
}
.box_item {
  width: 100%;
  height: 78rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  // margin-top: 24rpx;
  .itme_left {
    font-size: 30rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    color: #eee;
    display: flex;
    align-items: center;

    text {
      font-size: 30rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #eee;
    }

    .left_type {
      padding: 4rpx 10rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      margin-left: 16rpx;
      border-radius: 4rpx;
    }

    .type_0 {
      background: rgba(153, 187, 255, 0.302);
      color: #99bbff;
    }

    .type_1 {
      background: rgba(201, 153, 255, 0.302);
      color: #c999ff;
    }

    .type_2 {
      background: rgba(255, 182, 94, 0.302);
      color: #ffb65e;
    }
  }

  .item_right {
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    margin-right: 52rpx;
    position: absolute;
    right: 0;
    bottom: 50%;
    margin-bottom: -18rpx;
  }

  .right_type_0 {
    color: #55b877;
  }

  .right_type_1 {
    color: #fff;
  }
}
.empty_view {
  margin-top: 300rpx;
  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }
  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}
</style>
